<template>
  <n-card
    @click="openProfile"
    hoverable
    :bordered="false"
    class="e-card"
    style="cursor: pointer; height: 162px; overflow: hidden"
    :style="{
      width: '360px',
      background: 'rgba(255,255,255)'
    }"
  >
    <div style="display: flex">
      <div class="avatar" style="margin-top: 15px">
        <n-avatar :size="80" :src="expert.avatar" />
      </div>
      <div class="main" style="padding-left: 25px; flex-grow: 1">
        <n-space vertical>
          <div class="name">
            <span
              style="font-size: 18px; letter-spacing: 1px; text-indent: 1px"
              >{{ expert.name }}</span
            >
          </div>
          <div class="tag" style="margin-top: 1px">
            <n-space>
              <n-tag
                style="font-size: 13px; background-color: rgba(1, 1, 1, 0)"
                size="small"
              >
                职称：
                <span>{{ expert.position || '未知' }}</span>
              </n-tag>
              <n-tag
                style="font-size: 13px; background-color: rgba(1, 1, 1, 0)"
                size="small"
              >
                研究领域：
                <span>{{ expert.field || '未知' }}</span>
              </n-tag>
            </n-space>
          </div>

          <div class="organization" style="margin-top: 2px">
            <n-icon size="16" :depth="2" style="vertical-align: -10%">
              <home />
            </n-icon>
            <div style="display: inline-block; width: 6px"></div>
            <span>
              {{ expert.institution || '未知' }}
            </span>
          </div>
        </n-space>
      </div>
    </div>
  </n-card>
</template>

<script setup>
import { computed } from 'vue'
import { Home } from '@vicons/ionicons5'
const props = defineProps({
  // 专家数据
  expert: Object
})

const openProfile = () => {
  window.open('/profile/' + props.expert.id, '_blank')
}
const hoverColor = computed(() => {
  return 'rgba(255, 255, 255)'
})
</script>

<style scoped lang="scss">
.e-card {
  &:hover {
    background-color: v-bind(hoverColor) !important;
  }
}
.card {
  transition: all 0.4s;
  &-block {
    cursor: pointer;
    &:hover {
      background-color: v-bind(hoverColor);
    }
  }
}
:deep(.n-avatar) {
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.1), 1px 1px 2px rgba(0, 0, 0, 0.12);
}
</style>
